<!--
 * @Autor: 黄旗
 * @Date: 2020-07-22 08:27:57
-->
<template>
    <Card>
        <Tabs v-model="name" @on-click="clicktab(name)" :animated="false">
            <TabPane label="待回访" name="tableDHF">
                <tableDHF ref="tableDHF" />
            </TabPane>
            <TabPane label="已回访" name="tableYHF">
                <tableYHF ref="tableYHF" />
            </TabPane>
            <TabPane label="过期未回访" name="tableGQWHF">
                <tableGQWHF ref="tableGQWHF" />
            </TabPane>
        </Tabs>
    </Card>
</template>

<script>
    import tableDHF from './list-need';
    import tableYHF from './list-already';
    import tableGQWHF from './overdue';
    import { mapState, mapMutations } from 'vuex';

    export default {
        /* import引入的组件注入到components对象中使用 */
        components: { tableDHF, tableYHF, tableGQWHF },
        data() {
            return {
                name: 'tableDHF'
            };
        },
        /* 监听属性 类似于data概念 */
        computed: {
            ...mapState('admin/page', [
                'medicalListTab'
            ])
        },
        watch: {
            medicalListTab: {
                handler(value) {
                    this.name = value
                },
                immediate: true
            },
            name: {
                handler(value) {
                    this.changeMedicalListTab(value)
                },
            }
        },

        /* 创建完成能访问this实例 */
        created() { },
        /* 函数方法集合 */
        methods: {
            ...mapMutations({
                changeMedicalListTab: "admin/page/changeMedicalListTab",
            }),
            /* @函数功能: 初始化 */
            initial() {
            },
            clicktab(name) {
                this.$refs[name].dateInit()
            }
        },
        /* 挂载完成能访问DOM元素 */
        mounted() { this.initial() },
    }
</script>

<style lang='less' scoped>

</style>